<template>
  <div class="container">
    <div class="aside" ref="asideRef">
      <slot>
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Atque, culpa
        cumque, cupiditate doloremque doloribus explicabo, facilis illum ipsam
        minima nobis officiis optio possimus repudiandae sint totam ullam unde
        velit voluptates.
      </slot>
      <div
        @mousedown="
          e => {
            handleMouseDown(e, 'right')
          }
        "
        class="line right-line"
      ></div>
      <div
        @mousedown="
          e => {
            handleMouseDown(e, 'bottom')
          }
        "
        class="line bottom-line"
      ></div>
    </div>
  </div>
</template>

<script setup>
  import { ref, onMounted, onUnmounted } from 'vue'

  const asideRef = ref(null)
  const direction = ref('')
  //按下
  const handleMouseDown = (e, type) => {
    // console.log('按下', e, type)
    direction.value = type
    e.preventDefault()
    e.stopPropagation()
    const resizeMap = {
      right: 'col-resize',
      bottom: 'row-resize',
    }
    document.body.style.cursor = resizeMap[direction.value]
    document.addEventListener('mousemove', handleMouseMove)
    document.addEventListener('mouseup', handleMouseUp)
  }

  // 移动
  const handleMouseMove = e => {
    // console.log('拖动', e)
    const directionMap = {
      right: e.clientX,
      bottom: e.clientY,
    }
    const { left, top } = asideRef.value.getBoundingClientRect()
    const distanceMap = {
      right: left,
      bottom: top,
    }
    let distance = directionMap[direction.value] - distanceMap[direction.value]
    if (distance < 200) distance = 200
    if (direction.value == 'right') {
      asideRef.value.style.width = `${distance}px`
    } else if (direction.value == 'bottom') {
      if (distance > clientHeight.value) distance = clientHeight.value
      asideRef.value.style.height = `${distance}px`
    }
  }

  const handleMouseUp = () => {
    // console.log('松开', e)
    document.body.style.cursor = ''
    direction.value = ''
    document.removeEventListener('mousemove', handleMouseMove)
    document.removeEventListener('mouseup', handleMouseUp)
  }

  const clientHeight = ref(0)
  onMounted(() => {
    clientHeight.value = document.body.clientHeight
  })

  onUnmounted(() => {
    document.body.style.cursor = ''
    direction.value = ''
    document.removeEventListener('mousemove', handleMouseMove)
    document.removeEventListener('mouseup', handleMouseUp)
  })
</script>

<style lang="scss" scoped>
  .container {
    width: 100%;
    height: 100%;
    display: flex;
    .aside {
      width: 300px;
      height: 100%;
      border-right: 1px solid gray;
      border-bottom: 1px solid gray;
      position: relative;
      .line {
        position: absolute;
        background: #f00;
        opacity: 0;
        transition: all 0.5s;
        user-select: none;
        &:hover {
          opacity: 1;
        }
        &:active {
          opacity: 1;
        }
      }
      .right-line {
        right: 0;
        top: 0;
        width: 4px;
        height: 100%;
        cursor: col-resize;
      }
      .bottom-line {
        left: 0;
        bottom: 0;
        width: 100%;
        height: 4px;
        cursor: row-resize;
      }
    }
    .content {
      flex: 1 1 0;
      box-sizing: border-box;
      padding: 5px;
    }
  }
</style>
